import { useMachine } from '@xstate/react'
import { toggleMachine } from './toggleMachine'
import './App.css'

/**
 * A React component that demonstrates a simple toggle state machine.
 * Uses XState's `useMachine` hook to manage state and send toggle events.
 * Displays the current state value and provides a button to toggle the state.
 */
export default function App() {
  const [state, send] = useMachine(toggleMachine, {
    input: {
      maxCount: 5 // 设置一个合理的最大计数值
    }
  })

  return (
    <>
      <div>Value: {JSON.stringify(state.value)}</div>
      <button onClick={() => send({ 'type': 'toggle' })}>Toggle</button>
    </>
  )
}
